<template>
  <div class="wx-cascader">
    <ul class="wx-cascader__ul">
      <li
        class="wx-cascader__ul__li"
        v-for="(item, index) in data"
        :key="item.value"
        :class="{'wx-cascader__ul__active': active === index}"
        @click="handleClick(index)"
      >{{item.label}}</li>
    </ul>
    <WxCascaderPlan :list="clickData"/>
  </div>
</template>

<script lang="ts">
import { useCascader } from './useCascader';
import type { planType } from './cascader.type';
import WxCascaderPlan from "@/components/wxCascader/components/WxCascaderPlan.vue";
import { defineComponent, PropType } from "vue";

export default defineComponent({
  props: {
    list: {
      type: Array as PropType<Array<planType>>,
      default: () => []
    }
  },
  setup(props) {
    const { data, clickData, handleClick, active } = useCascader(props)

    return {
      data,
      handleClick,
      clickData,
      active
    }
  
  },
  components: {
    WxCascaderPlan
  }
})
</script>
